<template>
  <div class="main">
    <img src="@\assets\xxxhdpi\编组 5.png" width="460" height="540" />
    <a-typography class="login">
      <a-typography-title>
        <span class="welcome-text">欢迎回来，请登录</span>
      </a-typography-title>
      <a-typography-paragraph>
        <a-form
          class="form"
          :model="formState"
          name="basic"
          :label-col="{ span: 0 }"
          :wrapper-col="{ span: 24 }"
          autocomplete="off"
          @submit="handleLogin"
        >
          <a-form-item name="account" :rules="[{ required: true, message: '请输入你的账号!' }]">
            <a-input v-model:value="formState.account" placeholder="账号">
              <template #prefix>
                <img src="@\assets\xxhdpi\编组 2.png" width="16" height="16" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item name="password" :rules="[{ required: true, message: '请输入你的密码!' }]">
            <a-input-password v-model:value="formState.password" placeholder="密码">
              <template #prefix>
                <img src="@\assets\xxhdpi\编组 4.png" width="16" height="16" />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" html-type="submit" style="width: 100%;height: 48px;">登录</a-button>
          </a-form-item>
        </a-form>
      </a-typography-paragraph>
    </a-typography>

  </div>
</template>
<script lang="ts" setup>
import { login } from '@/api/customer'
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'

interface FormState {
  account: string
  password: string
}

const formState = reactive<FormState>({
  account: '',
  password: ''
})

const userStore = useUserInfoStore()
const router = useRouter()

function handleLogin() {
  login(formState).then((res) => {
    if (!res.data.ok) return
    userStore.setToken(res.data.entity.token)
    userStore.setID(res.data.entity.id)
    userStore.setName(res.data.entity.userName)
    router.push('/manage/auditManage')
  })
}
</script>

<style lang="scss" scoped>
body {
  display: grid;
  grid-template-columns: 1fr;
  .main {
    display: flex;
    flex-flow: row nowrap;
    border-radius: 16px;
   justify-content: center;
   margin-top: 18vh;
box-shadow: 0px 20px 40px 10px rgba(184, 198, 223, 0.1);
  }
  img {
    border-radius: 16px 0 0 16px;
  }
  .login {
    width: 460px;
    text-align: center;
    background: white;
    box-sizing: border-box;
    padding: 124px 32px 32px;
    border-radius: 0 16px 16px 0;
  }
  .welcome-text {
    margin: 32px auto;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    color: #3a82ff;
  }
}
</style>